<!--
  Generated template for the PlacedOrderPage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>
  <customer-header [showCate]="true"></customer-header>
</ion-header>
<ion-content>
  <ion-grid no-padding padding-top *ngIf="hasOrder;else emptyOrders">
    <p class="warning" color="warning" text-center>
      <ion-icon ios="ios-warning" md="md-warning"></ion-icon>
      Warning!<br>
      If an order <br>
      is placed,<br>
      it cannot <br>
      be undone!
    </p>
    <ion-buttons>
      <button ion-button (click)="placed()" outline block margin-bottom>Place Order</button>
      <button ion-button (click)="change()" block>change Order</button>
    </ion-buttons>
  </ion-grid>
  <ng-template #emptyOrders>
    <div margin-bottom class="order" color="row">

      <ion-grid no-padding *ngIf="!orders.delete">

        <ion-row padding-horizontal color="row">
          <ion-col col-4><label>Order ID:</label></ion-col>
          <ion-col col-8 text-right>{{orders.OrderNumber.Order_ID |orderIdFormat}}</ion-col>
          <ion-col col-4 offset-1><label>Bill:</label></ion-col>
          <ion-col col-7 text-right class="red">{{orders.OrderNumber.Order_Total |currency:'USD' :true}}</ion-col>
        </ion-row>
        <ion-row class="header" padding-horizontal>
          <ion-col col-4><label>Status:</label></ion-col>
          <ion-col col-8 text-right>{{orders.OrderNumber.Order_State |getState}}</ion-col>
          <ion-col col-5 offset-1><label>Subtotal:</label></ion-col>
          <ion-col col-6 text-right> {{orders.OrderNumber.Sub_Total |currency:'USD' :true}}</ion-col>
          <ion-col col-4><label>Store_ID:</label></ion-col>
          <ion-col col-8 text-right>{{orders.OrderNumber.Store_ID}}</ion-col>
          <ion-col col-4 offset-1><label>Tax:</label></ion-col>
          <ion-col col-7 text-right> {{orders.OrderNumber.Tax}}</ion-col>
          <ion-col col-5><label>Table_ID:</label></ion-col>
          <ion-col col-7 text-right>{{orders.OrderNumber.Table_ID}}</ion-col>
          <ion-col col-3 offset-1><label>Tips:</label></ion-col>
          <ion-col col-8 text-right>10-20% of Bill</ion-col>
        </ion-row>
        <!--{{orders.OrderNumber.Tips|currency:'USD' :true}}-->
        <ion-row *ngFor="let c of orders.Orders" padding-horizontal color="row">
          <ion-col col-3>
            {{c.Dish_Abbreviation}}
          </ion-col>
          <ion-col col-8 class="name">
            {{c.Dish_Name}}
          </ion-col>
          <ion-col col-3 text-left offset-2>
            {{c.Price}}
          </ion-col>
          <ion-col col-3 text-right>
            {{c.Number_of_Orders}}
          </ion-col>
          <ion-col col-5 class="state" text-right>
            {{c.Total}}
          </ion-col>
        </ion-row>

      </ion-grid>

    </div>
  </ng-template>
</ion-content>
